<script>
/*
 * @Author: Your name
 * @Date:   2020-06-25 14:20:59
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-07-04 10:36:24
 */
</script>
<template>
    <div id="navbar">
        <div class="nav-left"><slot name="left"></slot></div>
        <div class="nav-center"><slot name="center"></slot></div>
        <div class="nav-right"><slot name="right"></slot></div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="css">
    #navbar{
        width: 100%;
        height: 45px;
        line-height: 45px;
        background: var(--color-tint);
        /* 这里不需要设置fixed了，因为我们使用了better-scroll，给滑动区域也固定了位置。
        text-align: center;
        position: fixed;
        top: 0;
        z-index: 999; */
        display: flex;
        box-shadow: 0 3px 1px rgba(100,100,100,.1);
    }
    #navbar .nav-left{
        width: 60px;
    }
    #navbar .nav-center{
        color: #ffffff;
        flex: 1;
        text-align: center;
    }
    #navbar .nav-right{
        width: 60px;
    }
</style>